Component({
  options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },

  data: {
    _rgb: {
      r: 0,
      g: 0,
      b: 0
    },
    color: 'rgb(0, 0, 0)'
  },

  methods: {
    onClick() {
      this.setData({ '_rgb.r': this.data._rgb.r + 5 > 255 ? 0 : this.data._rgb.r + 5 })
    },
    onClick2() {
      this.setData({ '_rgb.g': this.data._rgb.g + 5 > 255 ? 0 : this.data._rgb.g + 5 })
    },
    onClick3() {
      this.setData({ '_rgb.b': this.data._rgb.b + 5 > 255 ? 0 : this.data._rgb.b + 5 })
    }
  },

  observers: {
    '_rgb.**': function (newVal) {
      this.setData({ color: `rgb(${newVal.r}, ${newVal.g}, ${newVal.b})` })
    }
  }
})